<!--
 * 详情公共头部
 * @param value  初始化值或者状态 对应 format[key]
 * @param customList  所有状态或者所有列表数据
 * @param format  {key, label} 对应 customList里面的数据
 * @param title 标题
 * @param multiple 是否显示多个按钮
 * @example  <details-head :title="`线路拆单`" v-model="status" :customList="buttonList" @change="save" />
 * @returns {value 初始化值 和 multiple 多选 参数二选一}
-->
<template>
  <div class="details-head">
    <div class="head-img-group">
      <!-- <img src="@/static/images/header.png" /> -->
      <div class="head-tit">{{ title }}</div>
      <div class="head-ben-group">
        <!-- <el-button-group> -->
        <el-button type="primary"
                   plain
                   @click="handelClose">{{
          closeLabel
        }}</el-button>
        <el-button v-for="(item, index) in customList"
                   :key="index"
                   type="primary"
                   :class="[
            item[format.key] === currentKey ? 'display' : multiple ? '' : 'hide'
          ]"
                   :loading="loading"
                   @click="buttonHandel(item[format.key])">{{ item.label }}</el-button>
        <el-button v-if="showPrint"
                   @click="print">打印</el-button>
        <!-- </el-button-group> -->
      </div>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: "DetailsHead",
  props: {
    // 绑定的值
    value: {
      type: [String, Number, Boolean],
      default: null
    },
    module: {
      prop: "value",
      event: "handlerValue",
    },
    customList: {
      type: Array,
      default: () => [
        // { label: '签收', status: 'aa' }
      ]
      // required: true
    },
    title: {
      type: String,
      default: ""
    },
    showPrint: {
      type: Boolean,
      default: false
    },
    printRouter: {
      type: String,
      default: ""
    },
    //格式
    format: {
      type: Object,
      default () {
        return {
          key: "status",
          label: "label"
        };
      }
    },
    printQuery: {
      type: Object,
      default: () => { }
    },
    // 是否显示多个
    multiple: {
      type: Boolean,
      default: false
    },
    closeLabel: {
      type: String,
      default: "关闭"
    },
    loading: {
      type: Boolean,
      default: false
    },
    closeFlag: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentKey: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit("handlerValue", val);
      }
    }
  },
  methods: {
    buttonHandel: _.debounce(function (value) {
      this.$emit("change", value);
    }, 400),
    // 关闭
    handelClose () {
      if (!this.closeFlag) {
        if (this.closeLabel === "返回") {
          this.$router.back();
        } else {
          window.close();
        }
      }
      this.$emit("close");
    },
    print () {
      const { href } = this.$router.resolve({
        name: this.printRouter,
        query: this.printQuery
      });
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped>
.details-head {
  width: 100%;
  height: 60px;
  background: var(--prev-bg-white);
  position: sticky;
  top: 0;
  z-index: 99;
  /* background-image: url("../../static/images/head.png");
  background-size: cover;
  background-attachment: fixed; */
}
.details-head img {
  height: 60px;
  z-index: -1;
  /* width: inherit;
  max-width: 1200px; */
}
.line {
  width: 100%;
  border-bottom: 4px solid var(--prev-icon-color-orange);
  position: absolute;
  top: 56px;
}
.head-img-group {
  width: 100%;
  /* margin: 0 auto; */
  position: relative;
}
.head-ben-group {
  position: absolute;
  top: 14px;
  right: 14px;
}
/* .head-ben-group >>> .el-button--small {
  padding: 9px 20px;
  font-size: 12px;
  border-radius: 3px;
  margin-left: 10px;
  border: 1px solid var(--prev-color-primary);
  color: var(--prev-color-primary);
} */
.head-tit {
  position: absolute;
  top: 0;
  left: 15px;
  font-size: 20px;
  color: var(--prev-color-text-black);
  font-weight: 500;
  line-height: 60px;
}
.hide {
  display: none !important;
}
.display {
  display: inline-block !important;
}
</style>
